import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';
import { format} from 'echarts';

export default class Treemap extends Component {
    onChartClick(param,echarts){
        console.log(param)
    };
    getOption = () => {
        const diskData = [
            {
                "value": 180,
                "name": "Accounts",
                "path": "Accounts",
                "children": [
                    {
                        "value": 76,
                        "name": "Access",
                        "path": "Accounts/Access",
                        "children": [
                            {
                                "value": 12,
                                "name": "DefaultAccessPlugin.bundle",
                                "path": "Accounts/Access/DefaultAccessPlugin.bundle"
                            },
                            {
                                "value": 28,
                                "name": "FacebookAccessPlugin.bundle",
                                "path": "Accounts/Access/FacebookAccessPlugin.bundle"
                            },
                            {
                                "value": 20,
                                "name": "LinkedInAccessPlugin.bundle",
                                "path": "Accounts/Access/LinkedInAccessPlugin.bundle"
                            },
                            {
                                "value": 16,
                                "name": "TencentWeiboAccessPlugin.bundle",
                                "path": "Accounts/Access/TencentWeiboAccessPlugin.bundle"
                            }
                        ]
                    },
                    {
                        "value": 92,
                        "name": "Authentication",
                        "path": "Accounts/Authentication",
                        "children": [
                            {
                                "value": 24,
                                "name": "FacebookAuthenticationPlugin.bundle",
                                "path": "Accounts/Authentication/FacebookAuthenticationPlugin.bundle"
                            },
                            {
                                "value": 16,
                                "name": "LinkedInAuthenticationPlugin.bundle",
                                "path": "Accounts/Authentication/LinkedInAuthenticationPlugin.bundle"
                            },
                            {
                                "value": 20,
                                "name": "TencentWeiboAuthenticationPlugin.bundle",
                                "path": "Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle"
                            },
                            {
                                "value": 16,
                                "name": "TwitterAuthenticationPlugin.bundle",
                                "path": "Accounts/Authentication/TwitterAuthenticationPlugin.bundle"
                            },
                            {
                                "value": 16,
                                "name": "WeiboAuthenticationPlugin.bundle",
                                "path": "Accounts/Authentication/WeiboAuthenticationPlugin.bundle"
                            }
                        ]
                    },
                    {
                        "value": 12,
                        "name": "Notification",
                        "path": "Accounts/Notification",
                        "children": [
                            {
                                "value": 12,
                                "name": "SPAAccountsNotificationPlugin.bundle",
                                "path": "Accounts/Notification/SPAAccountsNotificationPlugin.bundle"
                            }
                        ]
                    }
                ]
            },
            {
                "value": 1904,
                "name": "AddressBook Plug-Ins",
                "path": "AddressBook Plug-Ins",
                "children": [
                    {
                        "value": 744,
                        "name": "CardDAVPlugin.sourcebundle",
                        "path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle",
                        "children": [
                            {
                                "value": 744,
                                "name": "Contents",
                                "path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents"
                            }
                        ]
                    },
                    {
                        "value": 28,
                        "name": "DirectoryServices.sourcebundle",
                        "path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle",
                        "children": [
                            {
                                "value": 28,
                                "name": "Contents",
                                "path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents"
                            }
                        ]
                    },
                    {
                        "value": 680,
                        "name": "Exchange.sourcebundle",
                        "path": "AddressBook Plug-Ins/Exchange.sourcebundle",
                        "children": [
                            {
                                "value": 680,
                                "name": "Contents",
                                "path": "AddressBook Plug-Ins/Exchange.sourcebundle/Contents"
                            }
                        ]
                    },
                    {
                        "value": 432,
                        "name": "LDAP.sourcebundle",
                        "path": "AddressBook Plug-Ins/LDAP.sourcebundle",
                        "children": [
                            {
                                "value": 432,
                                "name": "Contents",
                                "path": "AddressBook Plug-Ins/LDAP.sourcebundle/Contents"
                            }
                        ]
                    },
                    {
                        "value": 20,
                        "name": "LocalSource.sourcebundle",
                        "path": "AddressBook Plug-Ins/LocalSource.sourcebundle",
                        "children": [
                            {
                                "value": 20,
                                "name": "Contents",
                                "path": "AddressBook Plug-Ins/LocalSource.sourcebundle/Contents"
                            }
                        ]
                    }
                ]
            },
            {
                "value": 36,
                "name": "Assistant",
                "path": "Assistant",
                "children": [
                    {
                        "value": 36,
                        "name": "Plugins",
                        "path": "Assistant/Plugins",
                        "children": [
                            {
                                "value": 36,
                                "name": "AddressBook.assistantBundle",
                                "path": "Assistant/Plugins/AddressBook.assistantBundle"
                            },
                            {
                                "value": 8,
                                "name": "GenericAddressHandler.addresshandler",
                                "path": "Recents/Plugins/GenericAddressHandler.addresshandler"
                            },
                            {
                                "value": 12,
                                "name": "MapsRecents.addresshandler",
                                "path": "Recents/Plugins/MapsRecents.addresshandler"
                            }
                        ]
                    }
                ]
            }
        ]
        // function colorMappingChange(value) {
        //   var levelOption = getLevelOption(value);
        //   chart.setOption({
        //     series: [{
        //       levels: levelOption
        //     }]
        //   });
        // }
        var formatUtil = format;
        function getLevelOption() {
          return [{
            itemStyle: {
              normal: {
                borderWidth: 0,
                gapWidth: 5
              }
            }
          }, {
            itemStyle: {
              normal: {
                gapWidth: 1
              }
            }
          }, {
            colorSaturation: [0.35, 0.5],
            itemStyle: {
              normal: {
                gapWidth: 1,
                borderColorSaturation: 0.6
              }
            }
          }];
        }
        const option = {
          title: {
            text: 'Disk Usage',
            left: 'center'
          },
    
          tooltip: {
            formatter: function (info) {
              var value = info.value;
              var treePathInfo = info.treePathInfo;
              var treePath = [];
    
              for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
              }
    
              return [
                '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
                'Disk Usage: ' + formatUtil.addCommas(value) + ' KB',
              ].join('');
            }
          },
    
          series: [{
            name:'Disk Usage',
            type:'treemap',
            visibleMin: 300,
            label: {
                show: true,
                formatter: '{b}'
            },
            itemStyle: {
              normal: {
                borderColor: '#fff'
              }
            },
            levels: getLevelOption(),
            data: diskData
          }]
        }
        return option;
    };
    render() {
        let onEvents={
            'click': this.onChartClick.bind(this)
        }
        return (
            <div className="bmain center">
                <ReactEcharts
                    option={this.getOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onEvents}
                    style={{width: '100%',height:'500px'}}
                />
            </div>
        )
    }
}